<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>

        // ajax:  asynchonours  javascript and xml    异步的

        // xml  是旧版的数据格式

        // <goods>
        //     <price>11</price>
        //     <title>手机</title>
        //     <imgSrc>11</imgSrc>
        // </goods>

        // json  新的数据格式    快

        // const goods = '{"price" : "99" , "title" : "手机" }' ;


        // ajax  异步无刷新技术



        // 创建

        // readyState  状态值  0 - 4     客户端
        //   0 还未发送初始化
        //   1 准备就绪
        //   2 数据准备
        //   3 正在发送请求 ， 
        //   4 发送请求成功
            


        // status  响应值      服务端

        //    200  请求成功




        // const xhr = new XMLHttpRequest() ;   // 创建一个http请求    建立一个连接

        // console.log(xhr.readyState);   // 客户端的状态改变

        // 第一个参数表示请求的方式  
        // 第二个参数表示路径(接口)
        // 第三个参数表示是否异步  true异步  false同步(不使用)
        // xhr.open('get' , '../data/1.txt' , true) ;   // 打开通讯录

        // console.log(xhr.readyState); 

        // xhr.send() ;   // 拨通电话

        // console.log(xhr.readyState); 

        // // 等待状态的改变
        // xhr.onreadystatechange = function() {
        //     // console.log(xhr.readyState);   // 2  3  4
        //     // console.log(xhr.status);  // 200 * 3 次
        //     // 客户端请求成功且服务器响应成功
        //     if(xhr.readyState === 4 && xhr.status === 200) {
        //         // 
        //         const data = xhr.responseText ;
        //         document.write(data) ;
        //     }
        // }


        // 创建连接
        const xhr = new XMLHttpRequest() ;

        // 打开通讯录
        xhr.open('get' , '../data/1.txt' , true) ;

        // 拨通电话
        xhr.send() ;

        // 等待状态改变
        xhr.onreadystatechange = function() {
            // 状态是成功的
            if(xhr.readyState === 4 && xhr.status === 200) {
                // 接受数据
                const data = xhr.responseText ;

                // 前端处理数据
                // document.write(data) ;
            }
        }
        


    </script>
    
</body>
</html>